<template>
  <q-layout view="lHh Lpr lff" style="font-size: 16px;">
    <q-header elevated>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="leftDrawerOpen = !leftDrawerOpen"
        />
        <q-breadcrumbs active-color="white" style="font-size: 16px">
          <q-breadcrumbs-el label="Home" icon="home" />
          <q-breadcrumbs-el label="Components" icon="widgets"/>
        </q-breadcrumbs>

        <q-btn  label="admin" icon="person" no-caps >
          <q-menu>
            <q-list style="min-width: 100px">
              <q-item clickable v-close-popup>
                <q-item-section>修改密码</q-item-section>
              </q-item>
              <q-item clickable v-close-popup>
                <q-item-section>注销登录</q-item-section>
              </q-item>

            </q-list>
          </q-menu>
        </q-btn>

      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      bordered
      width="250"
      content-class="bg-blue-grey-9 text-grey-1"
    >
      <div style="display: flex;">
        <div class="mainLogo">
          <img src="../../public/icons/logo.png" alt="logo" style="width: 100%;height: 100%;">
        </div>
        <div style="color: white;width:100%;text-align: center;line-height: 3vw;height:3vw;">数智东洲综合管理平台</div>
      </div>
      <div>
        <q-btn icon="home" outline flat style="width: 20%;font-size: 16px;"></q-btn>
        <span>首页</span>
      </div>
      <q-list>
        <q-expansion-item v-for="(item,index) in mainMenu" :key="index">
          <template v-slot:header>
            <q-item-section avatar>
              <q-icon :name="item.icon" style="font-size: 18px;"/>
            </q-item-section>

            <q-item-section>
              {{ item.text }}
            </q-item-section>
          </template>

          <q-list v-for="(item2,index2) in item.children" :key="index2" v-model="item.isSelected">
            <template>
              <q-item avatar clickable style="line-height: 2.5vw;margin-left: 2vw;" active-class="bg-grey-10">
                <div style="font-size: 14px;height: 2.5vw;"><q-icon :name="item2.icon" /></div>
                <div style="width: 100%;font-size: 16px;">&nbsp;&nbsp;{{ item2.text }}</div>
              </q-item>
            </template>

          </q-list>
        </q-expansion-item>

      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view/>
    </q-page-container>
  </q-layout>
</template>

<script>
// import EssentialLink from 'components/EssentialLink.vue'

const linksData = [];
const mainMenu = [
  {
    icon: 'person', text: '用户系统', isSelected: false,children: [
      {icon: 'person', text: '用户管理'},
      {icon: 'person', text: '用户令牌'}
    ]
  },
  {
    icon: 'spa', text: '农业相关',isSelected: false, children: [
      {icon: 'spa', text: '农户'},
      {icon: 'spa', text: '农业区域'},
      {icon: 'spa', text: '种植情况'}
    ]
  },
  {
    icon: 'water_drop', text: '应急相关',isSelected: false, children: [
      {icon: 'water_drop', text: '应急成员'},
      {icon: 'water_drop', text: '应急机械'},
      {icon: 'water_drop', text: '应急单位'},
      {icon: 'water_drop', text: '应急物资类型'},
      {icon: 'water_drop', text: '应急物资'}
    ]
  },
  {
    icon: 'videocam', text: '监控设置',isSelected: false, children: [
      {icon: 'videocam', text: '监控点位'}
    ]
  },
  {
    icon: 'explore', text: '服务',isSelected: false, children: [
      {icon: 'explore', text: '服务商'}
    ]
  },
  {
    icon: 'contact_mail', text: '工单系统', isSelected: false,children: [
      {icon: 'contact_mail', text: '农户工单'},
      {icon: 'contact_mail', text: '项目申报工单'},
      {icon: 'contact_mail', text: '疫情工单'}
    ]
  },
  {
    icon: 'settings_applications', text: '基础设置', isSelected: false,children: [
      {icon: 'settings_applications', text: '文件系统'},
      {icon: 'settings_applications', text: '短信模板'},
      {icon: 'settings_applications', text: '公告'},
      {icon: 'settings_applications', text: '滚动图'},
      {icon: 'settings_applications', text: '种植农作物名录库'},
    ]
  },
]

export default {
  name: 'MainLayout',
  // components: { EssentialLink },
  data() {
    return {
      leftDrawerOpen: false,
      essentialLinks: linksData,
      mainMenu
    }
  }
}
</script>
<style scoped lang="scss">
.mainLogo {
  height: 2.5vw;
  width: 2.5vw;
  margin-left: 1vw;
  padding: 0.2vw 0.2vw;
}
</style>
